<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="UTF-8">
        <title>客户管理</title>
        <base href="<%=basePath%>">
        <link rel="icon" href="${pageContext.request.contextPath}/static/resources/favicon.ico">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/static/resources/layui/css/layui.css"
              media="all"/>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/static/resources/css/public.css" media="all"/>
    </head>
    <body style="margin:10px;">
        <!-- 搜索条件开始 -->
        <div align="center" shiro:hasPermission="customer:view">
            <form class="layui-form" method="post" id="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">客户姓名:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="customerName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">客户电话:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="telephone" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">联系人:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="connectionPerson" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline" style="margin-left:50px;margin-top: 10px">
                        <button type="button"
                                class="layui-btn layui-btn-normal layui-btn-radius layui-icon layui-icon-search"
                                lay-submit lay-filter="doSearch" id="doSearch">查询
                        </button>
                        <button type="reset"
                                class="layui-btn layui-btn-warm layui-btn-radius layui-icon layui-icon-refresh">
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 搜索条件结束 -->


        <!-- 数据表格开始 -->
        <table class="layui-hide" id="customerTable" lay-filter="customerTable" lay-data="{id: 'customerTable'}"
               shiro:hasPermission="customer:view"></table>
        <!--表格工具条-->
        <div style="display: none;" id="tableToolBar">
            <button type="button" class="layui-btn layui-btn-sm" lay-event="add" shiro:hasPermission="customer:create">
                <i class="layui-icon">&#xe608;</i> 添加
            </button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"
                    shiro:hasPermission="customer:delete">
                <i class="layui-icon">&#xe640;</i> 批量删除
            </button>
        </div>
        <!-- 行级工具条 -->
        <div id="rowToolBar" style="display: none;">
            <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="customer:update">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
               shiro:hasPermission="customer:delete">删除</a>
        </div>
        <!-- 数据表格结束 -->

        <!-- 添加和修改的弹出层开始 -->
        <div style="display: none;padding:20px" id="saveOrUpdateDiv">
            <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
                <div class="layui-form-item">
                    <label class="layui-form-label">客户名称:</label>
                    <div class="layui-input-inline">
                        <input name="customerName" id="customerName" required placeholder="请输入客户姓名"
                               class="layui-input"/>
                        <input name="id" type="hidden"/>
                    </div>
                    <label class="layui-form-label">公司电话:</label>
                    <div class="layui-input-inline">
                        <input name="telephone" id="telephone" class="layui-input" placeholder="请输入公司电话"/>
                    </div>
                </div>
                <div style="display: none" class="layui-form-item">
                    <label class="layui-form-label">客户Id:</label>
                    <div class="layui-input-inline">
                        <input name="customerId" id="customerId" placeholder="请输入公司邮编" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">公司邮编:</label>
                    <div class="layui-input-inline">
                        <input name="zip" id="zip" placeholder="请输入公司邮编" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">公司地址:</label>
                    <div class="layui-input-block" style="width: 500px">
                        <input name="address" id="address" placeholder="请输入公司地址" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联系人:</label>
                    <div class="layui-input-inline">
                        <input name="connectionPerson" id="connectionPerson" required placeholder="请输入联系人姓名"
                               class="layui-input"/>
                    </div>
                    <label class="layui-form-label">联系人电话:</label>
                    <div class="layui-input-inline">
                        <input name="phone" id="phone" class="layui-input" placeholder="请输入公司电话"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱:</label>
                    <div class="layui-input-inline">
                        <input name="email" id="email" placeholder="请输入联系人邮箱" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开户银行:</label>
                    <div class="layui-input-inline">
                        <input name="bank" id="bank" required placeholder="请输入开户银行" class="layui-input"/>
                    </div>
                    <label class="layui-form-label">账户:</label>
                    <div class="layui-input-inline">
                        <input name="account" id="account" class="layui-input" placeholder="请输入银行账户"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否有效:</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="available" value="1" checked="checked" title="是">
                        <input type="radio" name="available" value="0" title="否">
                    </div>
                </div>
                <div class="layui-form-item" style="margin:10px 140px -15px">
                    <div class="layui-input-block">
                        <button type="button"
                                class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
                                lay-submit lay-filter="doSubmit">提交
                        </button>
                        <button type="reset"
                                class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置
                        </button>
                    </div>
                </div>
            </form>

        </div>
        <!-- 添加和修改的弹出层结束 -->

        <script src="${pageContext.request.contextPath}/static/resources/layui/layui.js"></script>
        <script type="text/javascript">
            var tableIns;
            var select = "";
            layui.use(['jquery', 'layer', 'form', 'table'], function () {
                var $ = layui.jquery;
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;

                //渲染客户数据表格
                tableIns = table.render({
                    elem: '#customerTable', //渲染的目标对象
                    url: 'bus/customer/loadCustomer', //数据接口
                    title: '客户数据表',//数据导出来的标题
                    toolbar: "#tableToolBar", //表格的工具条
                    defaultToolbar: ['filter', 'exports', 'print'],
                    height: 'full-90',
                    cellMinWidth: 100, //设置列的最小默认宽度
                    done: function (res, curr, count) {
                        if (res.data.length === 0 && curr !== 1) {
                            tableIns.reload({
                                page: {
                                    curr: curr - 1
                                }
                            })
                        }
                    },
                    totalRow: false, //开启合并行
                    page: true, //是否启用分页
                    text: {
                        none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                    },
                    cols: [[ //列表数据
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'customerId', title: 'ID', align: 'center', width: '100', sort: true},
                        {field: 'customerName', title: '客户名称', align: 'center', width: '100'},
                        {field: 'telephone', title: '公司电话', align: 'center', width: '150'},
                        {field: 'connectionPerson', title: '联系人', align: 'center', width: '90'},
                        {field: 'phone', title: '联系人电话', align: 'center', width: '180'},
                        {field: 'email', title: '邮箱', align: 'center', width: '210'},
                        {field: 'zip', title: '邮编', align: 'center', width: '150'},
                        {field: 'account', title: '银行账户', align: 'center', width: '240'},
                        {field: 'bank', title: '开户银行', align: 'center', width: '150'},
                        {field: 'address', title: '公司地址', align: 'center', width: '251'},
                        {
                            field: 'available', title: '是否有效', align: 'center', width: '90', sort: true,
                            templet: function (d) {
                                return d.available === 1 ? '<font color=blue>有效</font>' : '<font color=red>无效</font>';
                            }
                        },
                        {fixed: 'right', title: '操作', toolbar: '#rowToolBar', width: '130', align: 'center'}
                    ]]
                });


                //顶部模糊查询
                form.on("submit(doSearch)", function (data) {
                    tableIns.reload({
                        where: data.field,
                        page: {
                            curr: 1
                        }
                    });
                    return false;
                });


                //监听头部工具栏事件
                table.on("toolbar(customerTable)", function (obj) {
                    switch (obj.event) {
                        case 'add':
                            openAddCustomer();
                            break;
                        case 'batchDelete':
                            batchDeleteCustomer();
                            break;
                    }
                    ;
                })
                var lineData;
                //监听行工具事件
                table.on('tool(customerTable)', function (obj) {
                    lineData = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    if (layEvent === 'del') { //删除
                        deleteSingleCustomer(lineData);
                    } else if (layEvent === 'edit') { //编辑
                        openUpdateCustomer(lineData);
                    }
                });
                var url;
                var mainIndex;

                //打开添加页面
                function openAddCustomer() {
                    mainIndex = layer.open({
                        type: 1,
                        title: '添加客户',
                        content: $("#saveOrUpdateDiv"),
                        area: ['700px', '530px'],
                        success: function (index) {
                            //清空修改页面使用过的表单数据
                            $("#dataFrm")[0].reset();
                            //为弹框中表单提交传递提交地址
                            url = "http://localhost:8080/erp/bus/customer/addCustomer"
                        }
                    });
                }

                //添加页面,选中领导部门后,根据选中的部门id渲染部门对应的领导
                //根据deptid查询客户

                //打开修改页面
                function openUpdateCustomer(data) {
                    mainIndex = layer.open({
                        type: 1,
                        title: '修改客户',
                        content: $("#saveOrUpdateDiv"),
                        area: ['700px', '530x'],
                        success: function (index) {
                            form.val("dataFrm", data);
                            url = "http://localhost:8080/erp/bus/customer/updateCustomer";
                        }
                    });
                }

                //表单提交数据p
                form.on("submit(doSubmit)", function (result) {
                    //序列化表单数据
                    var formData = $("#dataFrm").serialize();
                    $.post(url, formData, function (result) {
                        //弹出操作情况数据msg-->封装数据处理请求返回的信息
                        var code = result.code;
                        var msg = result.msg;
                        if (code > 0) {
                            layer.close(mainIndex);
                            layer.alert(msg, {
                                icon: 1
                            })
                            tableIns.reload();
                        } else {
                            layer.alert(msg, {
                                icon: 0
                            })
                        }
                    })
                })

                //删除单个客户
                function deleteSingleCustomer(data) {
                    var url = "http://localhost:8080/erp/bus/customer/deleteCustomer";
                    layer.confirm('确认删除[' + data.customerName + ']客户吗？', function (index) {
                        $.post(url, data, function (result) {
                            if (result.code > 0) {
                                layer.alert(result.msg, {
                                    icon: 1
                                });
                                tableIns.reload();
                            } else {
                                layer.alert(result.msg, {
                                    icon: 0
                                });
                            }
                        });
                    });
                }

                //批量删除客户-->传customerids过去-->联想复选框传一个name对应多个值
                function batchDeleteCustomer() {
                    var checkStatus = table.checkStatus('customerTable');
                    var data = checkStatus.data;
                    var params = "";
                    //拼接多个值但是是一个name名
                    $.each(data, function (i, e) {
                        if (i === 0) {
                            params += "ids=" + e.id;
                        } else {
                            params += "&ids=" + e.id;
                        }
                    });
                    layer.confirm("真的要删除选中的这些客户吗?", function () {
                        $.post("/bus/customer/deleteBatchCustomer", params, function (result) {
                            if (result.code > 0) {
                                layer.alert(result.msg, {
                                    icon: 1
                                });
                            } else {
                                layer.alert(result.msg, {
                                    icon: 0
                                });
                            }
                            //刷新数据表格
                            tableIns.reload();
                        });
                    });
                }
            });
        </script>
    </body>
</html>